<%@ page contentType="text/html;charset=utf-8"%>
<%@ page import="java.util.*" %>
<%@ page import="org.jadestudio.home.dao.*" %>

<% 
String id = request.getParameter("id");
int p = request.getParameter("page")==null?1:Integer.parseInt(request.getParameter("page"));

java.util.Map articleDetail = (java.util.Map)request.getAttribute("articleDetail");
List<String> titles = (List<String>)request.getAttribute("titles");

List<java.util.Map> articleGameList = (List<java.util.Map>)request.getAttribute("articleGameList");
java.util.Map articleVoteList = (java.util.Map)request.getAttribute("articleVoteList");
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><%= articleDetail.get("article_name") %> - 3DS DS 游戏 资讯 攻略 发售 下载</title>
<meta name="description" content="" />
<meta name="keywords" content="DSDOWN 3DS DS DSI GB GBA WII WIIU Nintendo 任天堂 游戏 攻略 发售 资讯 " />
<link href="style/article_detail.css" rel="stylesheet" type="text/css" />
<link href="style/score.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style></head>

<script src="script/functions.js" type="text/javascript"></script>
<script src="script/jQuery.js" type="text/javascript"></script>
<script type="text/javascript">

	var header_count = 2;
	
	var vote_total = 0;
	
	var vote_1 = <%= articleVoteList.get("1")==null?0:articleVoteList.get("1") %>;
	var vote_2 = <%= articleVoteList.get("2")==null?0:articleVoteList.get("2") %>;
	var vote_3 = <%= articleVoteList.get("3")==null?0:articleVoteList.get("3") %>;
	var vote_4 = <%= articleVoteList.get("4")==null?0:articleVoteList.get("4") %>;
	var vote_5 = <%= articleVoteList.get("5")==null?0:articleVoteList.get("5") %>;
	var vote_6 = <%= articleVoteList.get("6")==null?0:articleVoteList.get("6") %>;
	
	var vote_1_p = 0;
	var vote_2_p = 0;
	var vote_3_p = 0;
	var vote_4_p = 0;
	var vote_5_p = 0;
	var vote_6_p = 0;
	
	$(document).ready(
	function()
	{
		// 计算用户评分
		calcVote();
		<% if (CommonDao.isGreaterThanZero(articleVoteList.get("-1"))){ %>
		showMask("#article_vote");	
		<% } %>
	});
	
	
	function showHeaderNav(target,menuname)
	{
		var left = $(target).offset().left;
		var top = $(target).offset().top;
		
		$(menuname).css("left", left - 1 + "px");
		$(menuname).css("top", top + 36 + "px");
		$(menuname).css("display", "inline");
		$(target).attr("class", "inlineli header_nav_li_hover");
	}
	
	function showHeaderNavDelay(target,menuname)
	{
		var fun = "showHeaderNav('"+target+"','"+menuname+"');";
		setTimeout(fun,10);
	}
	
	function hideHeaderNav(target,menuname)
	{
		setTimeout(function()
			{
				$(menuname).css("display", "none");
				$(target).attr("class", "inlineli header_nav_li");
			},10);
	}
	
	function showTip(target,tipname)
	{
		var left = $(target).offset().left;
		var top = $(target).offset().top;
		var height = $(target).height();
		
		$(tipname).css("left",left + "px");
		$(tipname).css("top",top + height + "px");
		$(tipname).css("display","block");
	}
	
	function hideTip(tipname)
	{
		$(tipname).css("display","none");
	}
	
	function showMask(target)
	{
		var left = $(target).offset().left;
		var top = $(target).offset().top;
		var width = $(target).width();
		var height = $(target).height();
		
		$("#mask").css("left",left+"px");
		$("#mask").css("top",top+"px");
		$("#mask").css("width",width+"px");
		$("#mask").css("height",height+"px");
		$("#mask").css("display","block");
	}
	
	function hideMask()
	{
		$("#mask").css("display","none");
	}
	
	function showFullMask()
	{
		var width = window.screen.width;
		var height = $(document).height();
		
		$("#fullmask").css("left","0px");
		$("#fullmask").css("top","0px");
		$("#fullmask").css("width",width+"px");
		$("#fullmask").css("height",height+"px");
		$("#fullmask").css("display","block");
	}
	
	function hideFullMask()
	{
		$("#fullmask").css("display","none");
	}
	
	
	function showBigPic(src)
	{
		// 将遮罩打开
		showFullMask()
		// 先显示图片再调整位置就可以将图片完整显示出来而非缩放后大小
		$("#big_img_img").attr("src",src);
		$("#big_img").css("display","block");
		var left = ($(document).width() - $("#big_img_img").width())/2;
		var top = $(document).scrollTop() + ($(window).height() - $("#big_img_img").height())/2; 
		$("#big_img").css("left", left+"px");
		$("#big_img").css("top", top+"px");
	}
	
	function hideBigPic()
	{
		$("#big_img").css("display","none");
		hideFullMask();
	}
	
	
	// 根据原始数据计算出文章评分、百分率等数据
	function calcVote()
	{
		var vote_total = vote_1 + vote_2 + vote_3 + vote_4 + vote_5 + vote_6;
		if (vote_total<=0) vote_total=1;
		vote_1_p = (vote_1/vote_total * 100).toFixed(0);
		vote_2_p = (vote_2/vote_total * 100).toFixed(0);
		vote_3_p = (vote_3/vote_total * 100).toFixed(0);
		vote_4_p = (vote_4/vote_total * 100).toFixed(0);
		vote_5_p = (vote_5/vote_total * 100).toFixed(0);
		vote_6_p = (vote_6/vote_total * 100).toFixed(0);		

		showVote();
	}
	
	// 根据当前投票分数显示百分比分数
	function showVote()
	{
		$("#article_vote_1").css("width",vote_1_p+"px");
		$("#article_vote_2").css("width",vote_2_p+"px");
		$("#article_vote_3").css("width",vote_3_p+"px");
		$("#article_vote_4").css("width",vote_4_p+"px");
		$("#article_vote_5").css("width",vote_5_p+"px");
		$("#article_vote_6").css("width",vote_6_p+"px");
		$("#article_vote_1").text(vote_1_p+"%");
		$("#article_vote_2").text(vote_2_p+"%");
		$("#article_vote_3").text(vote_3_p+"%");
		$("#article_vote_4").text(vote_4_p+"%");
		$("#article_vote_5").text(vote_5_p+"%");
		$("#article_vote_6").text(vote_6_p+"%");				
	}
	
	// 发送当前用户评分到服务器
	function sendVote(score)
	{
		// 将评分的遮罩显示
		showMask("#article_vote");	
		// 发送评分
		$.ajax(
		{
			type:"GET",
			url:"interface/vote_article.do?pm=voteArticle&article_id=<%=articleDetail.get("article_id")%>&value="+score,
			dateType:"json",
			cache: false,
			success:
				function(result)
				{
					var json = $.parseJSON(result);
					if (json.success=="true")
					{
						// 成功
						switch(score)
						{
							case 1:
							case "1":
								vote_1++;
								break;
							case 2:
							case "2":
								vote_2++;
								break;
							case 3:
							case "3":
								vote_3++;
								break;
							case 4:
							case "4":
								vote_4++;
								break;
							case 5:
							case "5":
								vote_5++;
								break;
							case 6:
							case "6":
								vote_6++;
								break;
						}
						calcVote();
					}
					else
					{
						alert(json.info);
					}
				},
			error:
				function()
				{
					alert("评分失败，请稍后再试。");
					hideMask();
				}
				
		});
	}

</script>



<body>

<!-- TIPS -->
<div class="mask" id="mask"></div>
<div class="fullmask" id="fullmask" onclick="hideBigPic();"></div>

<!-- 外层 -->
<div class="detail">

<!-- 大图片 -->
<div id="big_img" class="mask" onclick="hideBigPic();">
	<img id="big_img_img" />
</div>
<!-- 大图片 -->

<!-- 主页面 -->
<div class="main">

	<%@ include file="header.jsp" %>

	<!-- 名称 -->
	<div class="title">
		<small><a href="article_list.do?category=<%= articleDetail.get("article_type") %>"><%= articleDetail.get("article_type_name") %></a>&nbsp;&gt;&nbsp;文章详情</small>
		<big><%= articleDetail.get("article_name") %></big>
		<small><%= articleDetail.get("article_create_date") %>
				来源 TGBUS
				编辑 <%= articleDetail.get("article_writer") %>
				点击 <%= articleDetail.get("article_click") %></small>
	</div>
	<!-- 名称 -->
	
	<div class="header_shadow"></div>
	
	<!-- 外框阴影 -->
	<div class="center_shadow">
		<!-- 内容 -->
		<div class="content">
      	<!-- 左侧栏 -->
      	<div class="leftdiv">
      		<!-- 目录导读 -->
      		<%if (titles.size()>1){ %>
      		<div class="guidborder">
      		<big>导读</big>
      			<% for(int i=0;i<titles.size();i++){ %>
      			<% if (i%2==0){ %><ul><%} %>
      			<li class="inlineli">
      			<%if (i+1==p){ %>
      			<span>第<%=i+1%>页：<%= titles.get(i) %></span>
      			<%}else{ %>
      			<a href="articledetail.do?id=<%= id %>&page=<%= i+1 %>">第<%=i+1%>页：<%= titles.get(i) %></a>      			
      			<%} %>
      			</li>
      			<% if (i%2==1 || i==titles.size()-1){ %></ul><%} %>
      			<% } %>
      		</div>
      		<%} %>
      	
			<div class="item_article">
				
				<%= articleDetail.get("article_content") %>
				
			</div>
			<!-- 为图片注册点击事件 -->
			<script>
				$('.item_article img').click(function()
				{showBigPic(this.src);}
				);
			</script>
			
			<!-- 页码 -->
			<%
				if (titles.size()>1)
				{
					int pageStart = p - 3;
					if (pageStart<1) pageStart=1;
					int pageEnd = p + 3;
					if (pageEnd>titles.size()) pageEnd=titles.size();
				
					String purl = String.format(
						"articledetail.do?id=%s&page=",
						id
						);
			%>
			<div class="page">
				<% if (p>1){ %><a href="<%= purl+String.valueOf(p-1) %>">上一页</a><%} %>
				<% if (pageStart>1){ %> ...<%} %>
				<%
					for (int i=pageStart;i<=pageEnd;i++){
						if (i==p){
				%>
							<span><%= String.valueOf(i) %></span>				
				<%
						}else{
				%>
							<a href="<%= purl+String.valueOf(i) %>"><%= String.valueOf(i) %></a>				
				<%		}
					}
				%>
				<% if (pageEnd<titles.size()){ %>... <%} %>
				<% if (p<titles.size()){ %><a href="<%= purl+String.valueOf(p+1) %>">下一页</a><%} %>
			</div>
			<% } %>
			<!-- page -->
			
			<% if (articleGameList.size()>0){ %>
			<div class="subtitle clear">相关游戏</div>
			<!-- 相关游戏 -->
			<div>
				<ul class="similar_box">
				<%for (int i=0;i<articleGameList.size();i++){ %>
				<li class="inlineli" style="float:left;">
					<a class="similar_item" href="gamedetail.do?id=<%= articleGameList.get(i).get("game_id") %>" title="<%= articleGameList.get(i).get("simplified_chinese_name") %>" target="_blank">
					<div>
						<img src="<%= articleGameList.get(i).get("game_img_small") %>" />
						<big><%= articleGameList.get(i).get("simplified_chinese_name") %></big>
					</div>
					</a>
				</li>
				<%} %>
				</ul>
			</div>
			<%} %>
			<!-- 相关游戏 -->
			
		</div>
		<!-- left -->
		
		<!-- 右侧栏 -->
      	<div class="rightdiv">
			<!-- 评分 -->
			<div class="toplist rightbox_center">
				<h1>对文章的评价</h1>
				<div id="article_vote" class="article_vote">
					<ul style="margin:0; padding:0">
						<li class="inlineli" style="width:75px;">
							<div id="vote_pic_1" class="vote_pic_1" onclick="sendVote(1)"></div>
							<div id="vote_pic_2" class="vote_pic_2" onclick="sendVote(2)"></div>
							<div id="vote_pic_3" class="vote_pic_3" onclick="sendVote(3)"></div>
							<div id="vote_pic_4" class="vote_pic_4" onclick="sendVote(4)"></div>
							<div id="vote_pic_5" class="vote_pic_5" onclick="sendVote(5)"></div>
							<div id="vote_pic_6" class="vote_pic_6" onclick="sendVote(6)"></div>
						</li>
						<li class="inlineli" style="width:100px;margin-top:-5px;">
							<span id="article_vote_1"></span>
							<span id="article_vote_2"></span>
							<span id="article_vote_3"></span>
							<span id="article_vote_4"></span>
							<span id="article_vote_5"></span>
							<span id="article_vote_6"></span>
						</li>						
					</ul>
				</div>
			</div>
			<div class="rightbox_bottom"></div>
			
			<!-- 文章 TOP 10 -->
			<div class="toplist rightbox_center">
				<h1>热门文章</h1>
				<% List<java.util.Map> articleTop10 = (List<java.util.Map>)request.getAttribute("articleTop10"); %>
				<% for (int i=0;i<articleTop10.size();i++){ %>
					<a href="articledetail.do?id=<%= articleTop10.get(i).get("article_id") %>" title="<%=articleTop10.get(i).get("article_name")%>"><div class="toplist_icon" style="background-position:0px -<%= i*15 %>px;"></div><div class="toplist_text"><%= articleTop10.get(i).get("article_name") %></div></a>
				<% } %>
			</div>
			<div class="rightbox_bottom"></div>
			<!-- 文章 TOP 10 -->
            
            
			<!-- 相关文章 -->
			<% List<java.util.Map> articleSimilar = (List<java.util.Map>)request.getAttribute("articleSimilar"); %>
			<% if (articleSimilar.size()>0){ %>
			<div class="toplist rightbox_center">
				<h1>相关文章</h1>
				<% for(int i=0;i<articleSimilar.size();i++){ %>
					<a href="articledetail.do?id=<%= articleTop10.get(i).get("article_id") %>" title="<%=articleTop10.get(i).get("article_name")%>"><div class="toplist_icon" style="background-position:0px -<%= i*15 %>px;"></div><div class="toplist_text"><%= articleTop10.get(i).get("article_name") %></div></a>
				<%} %>
			</div>
			<div class="rightbox_bottom"></div>
			<!-- 相关文章 -->
			<%} %>
		</div>
		<!-- right -->
		</div>
		<!-- 内容 -->
	</div>
	<!-- 外框阴影 -->
	
	<div class="footer_shadow"></div>	
	
	<!-- 页脚 -->
	<%@ include file="footer.jsp" %>
		
</div>
<!-- 主页面 -->
</div>
<!-- 外层 -->

</body>
<script type="text/javascript">
	limitCharacterLength(".toplist>a div",24);
	limitCharacterLength(".similar_box div big",24);	
</script>
</html>
